<template>
	<view class="body">
		<view class="status">
			<text :class="info.status.number == 0 ? 'active':'after-step'">已提交</text><text class="split-line">/</text> 
			<text :class="info.status.number == 1 ? 'active' : (info.status.number > 1 ? 'after-step':'')">已分派</text><text class="split-line">/</text> 
			<text :class="info.status.number >= 2 && info.status.number <= 4 ? 'active' : (info.status.number == 5 ? 'after-step':'')">正在处理</text><text class="split-line">/</text> 
			<text :class="info.status.number == 5 ? 'active':''">已评价</text>
		</view>
		
		<view class="base-info">
			<view class="base-item">编号：{{info.id}}</view>
			<view v-for="(item, index) in basicField" :key="index" class="base-item">{{item.title}}：{{item.value}}</view>
			<view class="base-item" v-if="info.category">相关产品/服务：{{info.category.name}}</view>
			<view class="base-item" v-if="info.urgentrank">紧急程度：{{info.urgentrank.name}}</view>
			<view class="base-item" v-if="info.createtime_text">创建时间：{{info.createtime_text}}</view>
			<view class="base-item">
				<text>操作：</text>
				<text class="base-a" @click="urging" v-if="info.urging">催办</text>
				<text class="base-a" @click="close" v-if="info.close">关闭工单</text>
				<text class="base-a" @click="nav('/pages/workorder-info/evaluate?id=' + id)" v-if="(isUser) && ((info.status.number == 2) || (info.status.number == 3) || (info.status.number == 4))">评价工单</text>
				<text class="base-a" @click="nav('/pages/workorder-manage/transfer?id=' + id)" v-if="(!isUser) && ((info.status.number == 1) || (info.status.number == 2) || (info.status.number == 3))">转接工单</text>
				<text class="base-a" @click="deleteOrder" v-if="isUser && (info.status.number == 5)">删除工单</text>
			</view>
		</view>
		
		<view class="div-box">
			<view class="div-box-title">沟通记录</view>
			<view class="records-content">
				<view class="records-box">
					<view v-if="!records.length" class="empty-record">暂时还没有沟通记录...</view>
					<view v-if="records.length" v-for="(item, index) in records" :key="index" class="records-item" :class="isUser ? (item.sender == 'user' ? 'records-user':'records-engineer'):(item.sender == 'user' ? 'records-engineer':'records-user')">
						<image v-if="item.sender == 'engineer'" @click="nav('/pages/workorder-info/userinfo?id=' + info.id + '&engineer_id=' + item.engineer.id)" class="records-avatar" :src="item.engineer.user.avatar" mode="widthFix"></image>
						<image v-if="item.sender == 'user'" @click="nav('/pages/workorder-info/userinfo?id=' + info.id + '&user_id=' + info.user.id)" class="records-avatar" :src="info.user.avatar" mode="widthFix"></image>
						<view class="records-info-box">
							<view v-if="item.sender == 'engineer'" class="records-user-info">{{item.engineer.title}}　{{item.createtime_text}}</view>
							<view v-if="item.sender == 'user'" class="records-user-info">{{item.createtime_text}}　{{info.user.nickname}}</view>
							<view class="records-info-flex">
								<view class="records-info">
									<message :value="item"></message>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="info.status.number != 4 && info.status.number != 5" class="div-box">
			<view class="div-box-title">我要反馈</view>
			<view class="feedback">
				<u-form :model="form" :labelStyle="{fontSize: '30rpx'}" label-width="auto" label-position="top" ref="uForm" class="feedback-form">
					<form-field :form.sync="form" :formFile="formFile" :fields.sync="fields" v-on:clearError="clearError"></form-field>
					<u-button @click="submit" :loading="formButtonStatus" :custom-style="formButtonStyle" shape="square" :hair-line="false" :ripple="true" :disabled="formButtonStatus" ripple-bg-color="rgba(45,211,232, 0.8)">
						{{isUser ? '提交反馈':'提交回复'}}
					</u-button>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import Common from "../../common/common.js";
	var userinfo = uni.getStorageSync('userinfo')
	export default {
		data() {
			return {
				id: 0,
				info: {
					id: 0,
					status: {
						number: 0
					}
				},
				basicField: {},
				fields: {},
				rules: {},
				isUser: true,
				records: {},
				form: {},
				formFile: {},
				formButtonStatus: false,
				formButtonStyle: {
					backgroundImage: "linear-gradient(to bottom right, #34E4E8, #1FAEE8)",
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					margin: '60rpx 80rpx 60rpx 80rpx'
				}
			}
		},
		onLoad(query) {
			this.id = query.id ? query.id:0
			this.load(() => {
				if (query.bottom) {
					setTimeout(() => {
						uni.pageScrollTo({scrollTop: 99999, duration: 0});
					}, 100);
				}
			})
		},
		onPullDownRefresh: function () {
			this.load(() => {
				uni.stopPullDownRefresh()
				this.$u.toast('刷新成功~');
			})
		},
		methods: {
			nav: function (url) {
				uni.navigateTo({
					url: url
				})
			},
			urging: function () {
				var that = this
				that.$u.api.detailPost({
					id: that.id,
					type: 'urging'
				}).then(res => {
					that.$u.toast(res.msg);
					setTimeout(() => {
						that.load()
					}, 2500)
				}).catch(res => {
					that.$u.toast('请求失败，请重试！');
				})
			},
			close: function () {
				var that = this
				uni.showModal({
					title: '确认关闭',
					content: '您确认要关闭当前的工单吗？',
					success: res => {
						if (res.confirm) {
							that.$u.api.detailPost({
								id: that.id,
								type: 'close'
							}).then(res => {
								uni.showModal({
									title: '温馨提示',
									content: res.msg,
									showCancel: false,
									success: res => {
										if (res.confirm) {
											that.load()
										}
									}
								})
							}).catch(res => {
								that.$u.toast('请求失败，请重试！');
							})
						}
					}
				})
			},
			deleteOrder: function () {
				var that = this
				uni.showModal({
					title: '确认删除',
					content: '您确认要删除当前工单吗？',
					success: res => {
						if(res.confirm) {
							this.$u.api.delOrder({
								order_id: that.id
							}).then(res => {
								that.$u.toast(res.msg);
								if (res.code == 1) {
									uni.navigateBack({
										delta:1
									})
								}
							}).catch(res => {
								that.$u.toast('请求失败，请重试！');
							})
						}
					}
				})
			},
			recordsHandle: function (records) {
				for (let r in records) {
					if (records[r].message_type == 2) {
						records[r].suffixImg = Common.buildUrl('suffix', userinfo.token, records[r].message.original.ext)
					}
				}
				return records;
			},
			load: function(callback) {
				var that = this
				that.$u.api.detail({
					id: that.id
				}).then(res => {
					
					if (res.code == 0) {
						uni.showModal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
						return false;
					}
					
					that.info = res.data.row
					that.basicField = res.data.basicField
					that.isUser = res.data.isUser
					
					that.records = that.recordsHandle(res.data.records)
					
					// 组装form的value和rules参数
					for (let f in res.data.fields) {
						if (res.data.fields[f].type_list == 'file' || res.data.fields[f].type_list == 'files') {
							that.$set(that.formFile, res.data.fields[f].name, [])
						} else if (res.data.fields[f].type_list == 'switch') {
							res.data.fields[f].value = parseInt(res.data.fields[f].value) ? true:false
						} else if (res.data.fields[f].type_list == 'checkbox') {
							let vlist = [], selected = res.data.fields[f].value.split(',')
							for (let c in res.data.fields[f].values_list) {
								vlist.push({
									name: c,
									checked: selected.includes(c),
									label: res.data.fields[f].values_list[c]
								})
							}
							res.data.fields[f].values_list = vlist
						}
						
						that.$set(that.form, res.data.fields[f].name, res.data.fields[f].value)
						if (res.data.fields[f].unirule) {
							that.$set(that.rules, res.data.fields[f].name, Common.buildRule(res.data.fields[f].unirule, res.data.fields[f].title, res.data.fields[f].errormsg))
						}
					}
					that.$refs.uForm.setRules(that.rules);
					that.fields = res.data.fields
					
					uni.setNavigationBarTitle({
						title: res.data.title
					})
					typeof callback == 'function' && callback()
				}).catch(res => {
					that.$u.toast('请求失败，请重试！');
				})
			},
			clearError: function (name, type = 'none') {
				setTimeout(() => {
					if (type == 'none') {
						this.$refs.uForm.validateField(name)
					} else {
						this.$refs.uForm.validate(valid => {
							uni.hideToast()
						})
					}
				}, 50)
			},
			submit: function () {
				var that = this, formV = JSON.parse(JSON.stringify(that.form));
				that.$refs.uForm.validate(valid => {
					if (valid) {
						that.formButtonStatus = true
						formV.id = that.id
						for (let f in that.fields) {
							if (that.fields[f].type_list == 'switch') {
								formV[that.fields[f].name] = formV[that.fields[f].name] ? '1':'0';
							}
						}
						
						that.$u.api.reply(formV).then(res => {
							that.formButtonStatus = false
							if (res.code == 1) {
								let fileArr = ['files', 'file', 'image', 'images'], refreshPage = false;
								for (let f in that.fields) {
									if (fileArr.includes(that.fields[f].type_list)) {
										refreshPage = true
										break;
									}
								}
								if (refreshPage) {
									// 为了可以清空所有输入框
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/workorder-info/workorder-info?id=' + that.id + '&bottom=true'
										})
									}, 2000)
								} else {
									that.records = that.records.concat(that.recordsHandle(res.data.records))
									for (let f in that.form) {
										that.form[f] = ''
									}
									for (let f in that.fields) {
										if (that.fields[f].type_list == 'checkbox') {
											for (let fv in that.fields[f].values_list) {
												that.fields[f].values_list[fv].checked = false
											}
										}
									}
								}
							}
							that.$u.toast(res.msg);
						}).catch(res => {
							that.formButtonStatus = false
							that.$u.toast('请求失败，请重试！');
						})
					}
				})
			}
		}
	}
</script>

<style>
page {
	background: #FFFFFF;
}
.body {
	width: 94%;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}
.status {
	height: 80rpx;
	line-height: 80rpx;
	background: #F8F8F8;
	margin: 20rpx 0;
	padding: 0 20rpx;
	color: #999999;
	font-size: 28rpx;
}
.split-line {
	padding: 0 8rpx;
}
.active {
	color: #3498DB;
}
.after-step {
	color: #99CBED;
}
.base-info {
	background: #F8F8F8;
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	font-size: 28rpx;
}
.base-item {
	padding: 2rpx 10rpx;
	word-wrap: break-word;
	word-break: break-all;
	width: 100%;
}
.base-a {
	color: #007AFF;
	padding: 0 10rpx;
}
.div-box {
	margin: 20rpx 0;
}
.div-box-title {
	font-size: 28rpx;
	background: #F8F8F8;
	padding: 20rpx;
	border-left: 1px solid #3498DB;
}
.records-content {
	position: relative;
	border: 1px solid #F4F6F8;
	border-top: none;
	outline: none;
	transition: opacity .3s;
}
.records-box {
	margin: 0;
	padding: 0 0 10px 0;
}
.records-item {
	padding: 24rpx 16rpx 0 16rpx;
	display: flex;
	flex: 1;
	align-items: flex-start;
}
.records-avatar {
	height: 80rpx;
	width: 80rpx;
	border-radius: 50%;
}
.records-info-box {
	padding: 0 16rpx;
}
.records-user-info {
	text-align: left;
	color: #888;
	font-size: 28rpx;
}
.records-info {
	display: inline-block;
	padding: 12px 10px;
	border-radius: 4px;
	position: relative;
	width: auto;
	word-wrap: break-word;
	word-break: break-all;
	margin-top: 10rpx;
	font-size: 30rpx;
}
.records-engineer .records-info{
	margin-left: 6px;
	background: #F4F6F8;
	border: 1px solid #e8e8e8;
}
.records-engineer .records-info:after {
	content: "";
	position: absolute;
	top: 2px;
	left: -6px;
	z-index: 999;
	width: 10px;
	height: 14px;
	transform-style: inherit;
	transform: rotate(-1deg) skewX(35deg);
	background: #f7f9fa;
	border-top: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
}
.records-user {
	flex-direction: row-reverse;
	display: flex;
	justify-content: flex-start;
	align-content: center;
}
.records-user .records-info-flex {
	display: flex;
	justify-content: flex-end;
}
.records-user .records-user-info{
	text-align: right;
	color: #888;
}
.records-user .records-info {
	border: 1px solid rgba(52, 152, 219, .5);
	margin-right: 6px;
}
.records-user .records-info:after {
	content: "";
	position: absolute;
	top: 2px;
	right: -6px;
	z-index: 999;
	width: 10px;
	height: 14px;
	transform-style: inherit;
	transform: rotate(1deg) skewX(-35deg);
	background: #fff;
	border-top: 1px solid rgba(52, 152, 219, .5);
	border-right: 1px solid rgba(52, 152, 219, .5);
}
.empty-record {
	font-size: 28rpx;
	color: #999;
	text-align: center;
	height: 120rpx;
	line-height: 120rpx;
}
</style>
